<h2>Boekrekeningen</h2>

<button ng-click="toevoegen()" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-plus"></span></button>

<table class="table table-striped table-condensed" fixed-header table-height="700px">
	<thead>
		<tr>
			<th>rekeningnr</th>
			<th>omschrijving</th>
			<th>budgeteerbaar</th>
			<th>boekbaar</th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr ng-repeat="boekrekening in boekrekeningen" class="stripe">
			<td>{{boekrekening.rekeningnr}}</td>
			<td>{{boekrekening.omschrijving}}</td>
			<td>{{boekrekening.budgeteerbaar}}</td>
			<td>{{boekrekening.boekbaar}}</td>
			<td>
				<button ng-click="verwijderen($index)" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button>
				<button ng-click="bijwerken($index)" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil"></span></button>
			</td>
		</tr>
	</tbody>
</table>

<script type="text/ng-template" id="boekrekeningModal.html">
	<div class="modal-header">
		<h3 class="modal-title">{{actie}} van een boekrekening</h3>
	</div>
	<div class="modal-body">
		<form ng-submit="save()" role="form" id="myform">
			<div class="form-group">
				<label>Rekeningnr:</label>
				<input id="rekeningnr" class="form-control" type="text" ng-model="formObj.rekeningnr" placeholder="XXXXXX" pattern="[0-9]{6}" required />
			</div>
			<div class="form-group">
				<label>Omschrijving:</label>
				<input id="omschrijving" class="form-control" type="text" ng-model="formObj.omschrijving" placeholder="Geef hier een omschrijving" size="50" required />
			</div>
			<div class="checkbox">
				<label><input type ="checkbox" ng-model="formObj.budgeteerbaar"/> Budgeteerbaar</label>
			</div>
			<div class="checkbox">
				<label><input type ="checkbox" ng-model="formObj.boekbaar"/> Boekbaar</label>
			</div>
		</form>
	</div>
	<div class="modal-footer">
		<button type="submit" class="btn btn-success btn-sm" form="myform"><span class="glyphicon glyphicon-save"></span></button>
		<button type="reset" ng-click="reset()" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-remove"></span></button>
	</div>
</script>
